body {
background-color: #151515;
display: grid;
place-items: center;
height: 100vh;
}
.wandering-cubes {
width: 4em;
height: 4em;
position: relative;
margin: auto;
}
.wandering-cubes .cube {
background-color: #33b75d;
width: 2em;
height: 2em;
position: absolute;
top: 0;
left: 0;
animation: wandering-cubes 1.8s ease-in-out -1.8s infinite both;
}
.wandering-cubes .cube-2 {
animation-delay: -0.9s;
}
@keyframes wandering-cubes {
0% {
transform: rotate(0deg);
}
25% {
transform: translateX(3em) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(3em) translateY(3em) rotate(-179deg);
}
50.1% {
transform: translateX(3em) translateY(3em) rotate(-180deg);
}
75% {
transform: translateX(0) translateY(3em) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
}
}